<template>
  <div>
    <!-- template 中可以省略this -->
    <p>单价:{{ price }}</p>
    <p>数量:{{ count }}</p>
    <!-- 计算属性的用法和data中的数据一样,虽然它是函数,但不要加括号调用 -->
    <!-- 计算属性相对于函数调用优势在于缓存 -->
    <!-- 依赖项不变，直接从缓存中提取,依赖值变了更新缓存在提取 -->
    <p>总价(计算属性):{{ total }}</p>
    <p>总价(计算属性):{{ total }}</p>
    <p>总价(计算属性):{{ total }}</p>
    <p>总价(函数调用):{{getTotal()}}</p>
    <p>总价(函数调用):{{getTotal()}}</p>
    <p>总价(函数调用):{{getTotal()}}</p>
  </div>
</template>

<script>
export default {
  name: "VueBaseApp",

  data() {
    return {
      price: 30,
      count: 5,
    };
  },
  methods: {
    getTotal(){
      console.log("这是函数getTotal调用");
      return this.price * this.count;
    }
  },
  // 和data/methods平级写一个computed
  computed: {
    // 计算属性名(){return 值}
    total() {
      console.log("这是计算属性total调用");
      return this.price * this.count;
    },
  },
};
</script>

<style >
</style>